<template>
  <section class="oa-form__table">
    <h5>{{approve.name}}</h5>
    <table cellpadding="0" cellspacing="0">
      <tr v-if="$route.query.from != 'new'">
        <td>事务编号</td>
        <td>{{approve.name}}<span v-if="approve && approve.code">{{approve.code}}</span></td>
      </tr>
      <tr>
        <td>流程名称</td>
        <td>
          <span v-if="$route.query.from == 'new'">
            新建{{approve.name}}
          </span>
          <span v-else>
            {{approve.approve_name}}
          </span>
        </td>
      </tr>
      <tr>
        <td>申请事由</td>
        <td :title="reason"><el-input placeholder="申请事由" type="textarea" v-model="reason" :disabled="$route.query.from != 'new'"/></td>
      </tr>
    </table>
     <h3 class="oa-form__table-title">
      <span v-if="$route.query.from === 'new'">{{approve.name}}</span>
      <span v-else>
            {{approve.approve_name}}
      </span>
    </h3>
    <table cellpadding="0" cellspacing="0">
      <tr>
        <td class="_name">业务人员</td>
        <td>
           <el-select v-model="value" placeholder="请选择"  @change="selectStaff($event)"  :disabled="$route.query.from != 'new'">
            <el-option
              v-for="item in staff"
              :key="item.value"
              :label="item.label"
              :value="item">
            </el-option>
          </el-select>
        </td>
        <td class="_name">客户名称</td>
        <td width="20%">
          <el-input placeholder="客户名称" v-model="obj.obj352" :disabled="obj.obj352Flag"/>
        </td>
        <td class="_name">合同编号</td>
        <td width="20%">
          <el-input placeholder="合同编号" v-model="obj.obj353" :disabled="obj.obj353Flag"/>
        </td>
      </tr>
      <tr>
        <td rowspan="5" class="_name">
          <div>
            媒体类别
            <br />
            (国际游轮中心)
          </div>
        </td>
        <td class="_name">广场及廊道</td>
        <td colspan="4">
           <el-input placeholder="广场及廊道" v-model="gcjzl" :disabled="$route.query.from != 'new'"/>
        </td>
      </tr>
      <tr>
        <td class="_name">集散大厅/售票厅</td>
        <td colspan="4">
          <el-input placeholder="集散大厅/售票厅" v-model="jsdt" :disabled="$route.query.from != 'new'"/>
        </td>
      </tr>
      <tr>
        <td class="_name">候船厅/趸船区</td>
        <td colspan="4">
          <el-input placeholder="候船厅/趸船区" v-model="hct" :disabled="$route.query.from != 'new'"/>
        </td>
      </tr>
      <tr>
        <td class="_name">到港通道</td>
        <td colspan="4">
          <el-input placeholder="到港通道" v-model="dgtd" :disabled="$route.query.from != 'new'"/>
        </td>
      </tr>
      <tr>
        <td class="_name">停车场及电梯</td>
        <td colspan="4">
          <el-input placeholder="停车场及电梯" v-model="tccjdt" :disabled="$route.query.from != 'new'"/>
        </td>
      </tr>
      <tr>
        <td class="_name">预订发布日</td>
        <td>
          <el-date-picker
            v-model="ydfbr"
            :disabled="$route.query.from != 'new'"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="预订发布日">
          </el-date-picker>
        </td>
        <td class="_name">发布期限</td>
        <td>
          <el-input placeholder="发布期限" v-model="fbqx" :disabled="$route.query.from != 'new'"/>
        </td>
        <td class="_name">预定点位确认</td>
        <td>
          <el-input placeholder="预定点位确认" v-model="yddwqd" :disabled="yddwqdFlag"/>
        </td>
      </tr>
    </table>
    <h3 class="oa-form__table-head">工作流程单</h3>
    <table cellpadding="0" cellspacing="0">
      <tr>
        <td class="_name">版面内容</td>
        <td>
          <el-input placeholder="版面内容" v-model="bmnr" :disabled="$route.query.from != 'new'"/>
        </td>
        <td class="_name">优惠条款</td>
        <td colspan="3">
          <el-input placeholder="版面内容" v-model="discount" :disabled="$route.query.from != 'new'"/>
          <!-- <el-select v-model="discount" placeholder="请选择优惠条款" :disabled="$route.query.from != 'new'">
            <el-option
              v-for="item in discounts"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select> -->
        </td>
      </tr>
    </table>
    <history :process="process"></history>
    <h3 class="oa-form__table-head">款项支付明细</h3>
    <table cellpadding="0" cellspacing="0">
      <tr>
        <td class="_name">合同总额</td>
        <td>
          <el-input placeholder="合同总额" v-model="htzje" :disabled="htzjeFlag"/>
        </td>
        <td class="_name">首付款金额</td>
        <td>
          <el-input placeholder="首付款金额" v-model="sfkje" :disabled="sfkjeFlag"/>
        </td>
        <td class="_name">到款时间</td>
        <td>
          <el-date-picker
            v-model="dksj"
            :disabled="dksjFlag"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="到款时间">
          </el-date-picker>
        </td>
      </tr>
    </table>
    <h3 class="oa-form__table-head">款项到账情况</h3>
    <table cellpadding="0" cellspacing="0">
      <tbody v-for = "item in 3" :key = "item">
         <tr>
          <td class="_name">{{`第${indexes[item-1]}期到款金额`}}</td>
          <td>
            <el-input :placeholder="`第${indexes[item-1]}期到款金额`" v-model="money[`dkje${item+1}`]"  :disabled="money[`dkje${item+1}Flag`]"/>
          </td>
          <td class="_name">{{`第${indexes[item-1]}期到款时间`}}</td>
          <td>
            <el-date-picker
              v-model="money[`dksj${item+1}`]"
              :disabled="money[`dksj${item+1}Flag`]"
              value-format="yyyy-MM-dd"
              type="date"
              :placeholder="`第${indexes[item-1]}期到款时间`">
            </el-date-picker>
          </td>
        </tr>
      </tbody>
      <tr>
        <td class="_name">特殊到期款情况备注</td>
        <td colspan="5">
          <el-input placeholder="特殊到期款情况备注" v-model="bsqkbz"  :disabled="bsqkbzFlag"/>
        </td>
      </tr>
    </table>
    <p class="oa-form__table-hd">喷绘记录</p>
    <table width="100%" border="1" cellspacing="0" cellpadding="0">
      <tr>
        <td class="_name">下单日期</td>
        <td class="_name">发布内容</td>
        <td class="_name">宽</td>
        <td class="_name">高</td>
        <td class="_name">数量</td>
        <td class="_name">上刊时间或换画时间派单上画</td>
        <td class="_name">备注</td>
      </tr>
      <tr v-for="( item, index) in 8" :key="index">
        <td>
          <el-date-picker
            v-model="obj['xdrq' + item]"
            :disabled="obj['xdrq' + item + 'Flag']"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="下单日期">
          </el-date-picker>
        </td>
        <td>
          <el-input v-model="obj['fbnr' + item]"  :disabled="obj['fbnr' + item + 'Flag']" placeholder="发布内容"></el-input>
        </td>
        <td>
           <el-input v-model="obj['width' + item]"  :disabled="obj['width' + item + 'Flag']" placeholder="宽"></el-input>
        </td>
         <td>
          <el-input v-model="obj['height' + item]"  :disabled="obj['height' + item + 'Flag']" placeholder="高"></el-input>
        </td>
        <td>
           <el-input v-model="obj['num' + item]"  :disabled="obj['num' + item + 'Flag']" placeholder="数量"></el-input>
        </td>
        <td>
          <el-date-picker
            v-model="obj['sksj' + item]"
            :disabled="obj['sksj' + item + 'Flag']"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="上刊时间或换画时间派单上画">
          </el-date-picker>
        </td>

        <td>
          <el-input v-model="obj['phbz' + item]"  :disabled="obj['phbz' + item + 'Flag']" placeholder="备注"></el-input>
        </td>
      </tr>
    </table>
    <files></files>
    <h3 class="oa-form__table-hd">附件1（国际游轮，发布点位明细）</h3>
    <table cellpadding="0" cellspacing="0">
      <tr class="_name">
        <td>序号</td>
        <td>区域</td>
        <td>点位</td>
        <td>编号</td>
        <td>数量</td>
        <td>宽</td>
        <td>高</td>
        <td>平方数</td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
  </section>
</template>
<script>
import { save, info, getAutoKey } from '@/api/oa/index.js'
import history from './components/process'
import files from './components/files'
import mixin from '@/mixins/index.js'
const obj = {}
for (var i = 1; i < 11; i++) {
  obj['xdrq' + i] = ''
  obj[`xdrq${i}Flag`] = true
  obj['fbnr' + i] = ''
  obj[`fbnr${i}Flag`] = true
  obj['width' + i] = ''
  obj[`width${i}Flag`] = true
  obj['num' + i] = ''
  obj[`num${i}Flag`] = true
  obj['height' + i] = ''
  obj[`height${i}Flag`] = true
  obj['sksj' + i] = ''
  obj[`sksj${i}Flag`] = true
  obj['phbz' + i] = ''
  obj[`phbz${i}Flag`] = true
}
for (let i = 352; i < 353; i++) {
  obj['obj' + i] = ''
  obj[`obj${i}Flag`] = true
}
const indexes = ['二', '三', '四']
const money = {}
for (var j = 0; j < 3; j++) {
  money[`dksj${j + 2}`] = ''
  money[`dksj${j + 2}Flag`] = true
  money[`dkje${j + 2}`] = ''
  money[`dkje${j + 2}Flag`] = true
}
export default {
  mixins: [mixin],
  components: { history, files },
  props: ['curDepartment', 'userInfo', 'approve', 'staff', 'departments', 'addDofield', 'process'],
  data () {
    return {
      reason: '',
      flag: false,
      value: '',
      department: '',
      obj,
      money,
      indexes,
      truename: '',
      disabled: false,
      customer: '',
      hetong: '',
      gcjzl: '',
      jsdt: '',
      hct: '',
      dgtd: '',
      tccjdt: '',
      ydfbr: '',
      fbqx: '',
      yddwqd: '',
      yddwqdFlag: true,
      bmnr: '',
      radio: 1,
      bsqkbz: '',
      bsqkbzFlag: true,
      discount: '',
      field_ids: [],
      field_vals: [],
      htzje: '',
      htzjeFlag: true,
      sfkje: '',
      sfkjeFlag: true,
      dksj: '',
      dksjFlag: true,
      file_paths: [],
      file_names: []
    }
  },
  created () {
    if (this.$route.query.from === 'new') {
      this.disabled = true
    } else {
      this.infoFunc()
    }
    this.reset()
  },
  computed: {
    uploadArr () {
      return this.$store.state.uploadArr
    }
  },
  watch: {
    addDofield () {
      this.addDofieldRender()
    }
  },
  methods: {
    // 获取field_ids  field_vals
    renderCustom () {
      console.log('change')
      this.autoField && this.autoField.forEach(e => {
        this.judge(e)
        if (e.val) {
          this.field_ids.push(e.approve_field_id)
          this.field_vals.push(e.val)
        }
        return e
      })
      console.log(this.field_ids, this.field_vals)
    },
    getData () {
      if (this.uploadArr.length > 0) {
        this.uploadArr.forEach(item => {
          this.file_paths.push(item.path)
          this.file_names.push(item.name)
        })
      }
      console.log(this.approve)
      const params = {
        // token: window.localStorage.getItem('token'),
        openid: window.localStorage.getItem('token'),
        reason: this.reason,
        approve_id: this.approve.id,
        department_id: this.department,
        apply_date: this.applyTime,
        truename: this.truename
      }
      // if (this.file_paths.length > 0) {
      //   const paths = new Set(this.file_paths)
      //   const names = new Set(this.file_names)
      //   params.file_paths = Array.from(paths).join()
      //   params.file_names = Array.from(names).join()
      // }
      const paths = new Set(this.file_paths)
      const names = new Set(this.file_names)
      params.file_paths = Array.from(paths).join()
      params.file_names = Array.from(names).join()
      this.addDofieldRender()
      params.field_ids = this.field_ids.join()
      params.field_vals = this.field_vals.join()
      if (!this.reason) {
        this.$message.error('请输入申请原因')
        return false
      }
      save(params).then((res) => {
        const { status } = res
        if (status) {
          this.$message.error('提交成功')
          this.$router.push({ name: 'oaList', query: { activeName: 4 } })
        }
      })
      this.$store.commit('getUpload', [])
    },
    reset () {
      const obj = {}
      for (var i = 1; i < 11; i++) {
        obj['xdrq' + i] = ''
        obj[`xdrq${i}Flag`] = true
        obj['fbnr' + i] = ''
        obj[`fbnr${i}Flag`] = true
        obj['width' + i] = ''
        obj[`width${i}Flag`] = true
        obj['num' + i] = ''
        obj[`num${i}Flag`] = true
        obj['height' + i] = ''
        obj[`height${i}Flag`] = true
        obj['sksj' + i] = ''
        obj[`sksj${i}Flag`] = true
        obj['phbz' + i] = ''
        obj[`phbz${i}Flag`] = true
      }
      for (let i = 23; i < 25; i++) {
        obj['obj' + i] = ''
        obj[`obj${i}Flag`] = true
      }
      this.obj = obj
      const money = {}
      for (var j = 0; j < 3; j++) {
        money[`dksj${j + 2}`] = ''
        money[`dksj${j + 2}Flag`] = true
        money[`dkje${j + 2}`] = ''
        money[`dkje${j + 2}Flag`] = true
      }
      this.money = money
    },
    infoFunc () {
      const params = {
        // token: window.localStorage.getItem('token'),
        openid: window.localStorage.getItem('token'),
        approve_id: this.approve.approve_id,
        workflow_id: this.approve.workflow_id
      }
      info(params).then(res => {
        const { status, data: { workflow }, data: { fields }, data: { node } } = res
        if (status) {
          this.reason = workflow.reason
          this.contents = workflow.contents
          this.value = workflow.truename
          this.department = workflow.department_id
          window.localStorage.setItem('approve_node_id', workflow.approve_node_id)
          window.localStorage.setItem('is_end', workflow.is_end)
          this.nodeInfo(node)
          fields && fields.forEach(e => {
            if (e.field_name === '业务人员') {
              this.value = e.field_val
            }
            if (e.field_name === '客户名称') {
              this.customer = e.field_val
            }
            if (e.field_name === '合同编号') {
              this.hetong = e.field_val
            }
            if (e.field_name === '广场及廊道') {
              this.gcjzl = e.field_val
            }
            if (e.field_name === '集散大厅/售票厅') {
              this.jsdt = e.field_val
            }
            if (e.field_name === '候船厅/趸船区') {
              this.hct = e.field_val
            }
            if (e.field_name === '停车场及电梯') {
              this.tccjdt = e.field_val
            }
            if (e.field_name === '到港通道') {
              this.dgtd = e.field_val
            }
            if (e.field_name === '预订发布日') {
              this.ydfbr = e.field_val
            }
            if (e.field_name === '发布期限') {
              this.fbqx = e.field_val
            }
            if (e.field_name === '预定点位确认') {
              this.yddwqd = e.field_val
            }
            if (e.field_name === '版面内容') {
              this.bmnr = e.field_val
            }
            if (e.field_name === '优惠条款') {
              this.discount = e.field_val
            }
          })
          this.getAutoKey(workflow.approve_node_id)
        }
      })
    },
    nodeInfo (node) {
      node && node.forEach(e => {
        if (e.name === '点位最终确认') {
          e.fields && e.fields.forEach(j => {
            if (j.field_name === '预定点位确认') {
              this.yddwqd = j.field_val
            }
          })
        }
        if (e.name === '到款确认') {
          e.fields && e.fields.forEach(j => {
            for (let i = 0; i < 3; i++) {
              if (j.field_name === `第${indexes[i]}期到款金额`) {
                this.money[`dkje${i + 2}`] = j.field_val
              }
              if (j.field_name === `第${indexes[i]}期到款时间`) {
                this.money[`dksj${i + 2}`] = j.field_val
              }
              if (j.field_name === '特殊到期款情况备注') {
                this.bsqkbz = j.field_val
              }
            }
            return j
          })
        }
        if (e.name === '首付款确认') {
          e.fields && e.fields.forEach(j => {
            for (let i = 0; i < 3; i++) {
              if (j.field_name === '合同总额') {
                this.htzje = j.field_val
              }
              if (j.field_name === '首付款金额') {
                this.sfkje = j.field_val
              }
              if (j.field_name === '到款时间') {
                this.dksj = j.field_val
              }
            }
            return j
          })
        }
        if (e.name === '喷绘下单' || e.name === '下单制作') {
          e.fields && e.fields.forEach(j => {
            for (let i = 1; i < 11; i++) {
              if (j.field_name === `下单日期${i}`) {
                this.obj[`xdrq${i}`] = j.field_val
              }
              if (j.field_name === `发布内容${i}`) {
                this.obj[`fbnr${i}`] = j.field_val
              }
              if (j.field_name === `喷绘记录高${i}`) {
                this.obj[`height${i}`] = j.field_val
              }
              if (j.field_name === `喷绘记录数量${i}`) {
                this.obj[`num${i}`] = j.field_val
              }
              if (j.field_name === `喷绘记录宽${i}`) {
                this.obj[`width${i}`] = j.field_val
              }
              if (j.field_name === `派单上画${i}`) {
                this.obj[`sksj${i}`] = j.field_val
              }
              if (j.field_name === `喷绘记录备注${i}`) {
                this.obj[`phbz${i}`] = j.field_val
              }
            }
            return j
          })
        }
        if (e.name === '合同拟定') {
          e.fields && e.fields.forEach(j => {
            if (j.field_id >= 353 && j.field_id <= 352) {
              this.obj[`obj${j.field_id}`] = j.field_val
            }
          })
        }
        return e
      })
    },
    submitFunc () {
      if (!this.flag) {
        this.flag = true
        this.getData()
        setTimeout(() => {
          this.flag = false
        }, 3000)
      }
    },
    addDofieldRender () {
      this.addDofield && this.addDofield.forEach(e => {
        this.judge(e)
        if (e.val) {
          this.field_ids.push(e.field_id)
          this.field_vals.push(e.val)
        }
        return e
      })
      console.log('add', this.addDofield)
    },
    // 选择申请人
    selectStaff (e) {
      this.truename = e.truename
      this.department = e.department_id
    },
    getAutoKey (id) {
      getAutoKey(id).then(res => {
        const { status, data } = res
        this.autoField = data
        if (status) {
          this.autoField && this.autoField.forEach(e => {
            this.judge(e)
            return e
          })
        }
      })
    },
    judge (e) {
      if (e.field_name === '业务人员') {
        this.$set(e, 'val', this.truename)
      }
      if (e.field_name === '客户名称') {
        this.$set(e, 'val', this.customer)
      }
      if (e.field_name === '合同编号') {
        this.$set(e, 'val', this.hetong)
      }
      if (e.field_name === '广场及廊道') {
        this.$set(e, 'val', this.gcjzl)
      }
      if (e.field_name === '集散大厅/售票厅') {
        this.$set(e, 'val', this.jsdt)
      }
      if (e.field_name === '停车场及电梯') {
        this.$set(e, 'val', this.tccjdt)
      }
      if (e.field_name === '候船厅/趸船区') {
        this.$set(e, 'val', this.hct)
      }
      if (e.field_name === '到港通道') {
        this.$set(e, 'val', this.dgtd)
      }
      if (e.field_name === '预订发布日') {
        this.$set(e, 'val', this.ydfbr)
      }
      if (e.field_name === '发布期限') {
        this.$set(e, 'val', this.fbqx)
      }
      if (e.field_name === '预定点位确认') {
        this.$set(e, 'val', this.yddwqd)
        this.yddwqdFlag = false
      }
      if (e.field_name === '版面内容') {
        this.$set(e, 'val', this.bmnr)
      }
      if (e.field_name === '优惠条款') {
        this.$set(e, 'val', this.discount)
      }
      if (e.field_name === '合同总额') {
        this.$set(e, 'val', this.htzje)
        this.htzjeFlag = false
      }
      if (e.field_name === '首付款金额') {
        this.$set(e, 'val', this.sfkje)
        this.sfkjeFlag = false
      }
      if (e.field_name === '到款时间') {
        this.$set(e, 'val', this.dksj)
        this.dksjFlag = false
      }
      for (let i = 1; i < 11; i++) {
        if (e.field_name === `下单日期${i}`) {
          this.$set(e, 'val', this.obj[`xdrq${i}`])
          this.obj[`xdrq${i}Flag`] = false
        }
        console.log(e.field_name)
        if (e.field_name === `发布内容${i}`) {
          this.$set(e, 'val', this.obj[`fbnr${i}`])
          this.obj[`fbnr${i}Flag`] = false
          console.log(this.obj)
        }
        if (e.field_name === `喷绘记录宽${i}`) {
          this.$set(e, 'val', this.obj[`width${i}`])
          this.obj[`width${i}Flag`] = false
        }
        if (e.field_name === `喷绘记录数量${i}`) {
          this.$set(e, 'val', this.obj[`num${i}`])
          this.obj[`num${i}Flag`] = false
        }
        if (e.field_name === `喷绘记录高${i}`) {
          this.$set(e, 'val', this.obj[`height${i}`])
          this.obj[`height${i}Flag`] = false
        }
        if (e.field_name === `派单上画${i}`) {
          this.$set(e, 'val', this.obj[`sksj${i}`])
          this.obj[`sksj${i}Flag`] = false
        }
        if (e.field_name === `喷绘记录备注${i}`) {
          this.$set(e, 'val', this.obj[`phbz${i}`])
          this.obj[`phbz${i}Flag`] = false
        }
      }
      for (let i = 2; i < 5; i++) {
        if (e.field_name === `第${indexes[i - 2]}期到款金额`) {
          this.$set(e, 'val', this.money[`dkje${i}`])
          this.money[`dkje${i}Flag`] = false
        }
        if (e.field_name === `第${indexes[i - 2]}期到款时间`) {
          this.$set(e, 'val', this.money[`dksj${i}`])
          this.money[`dksj${i}Flag`] = false
        }
        if (e.field_name === '特殊到期款情况备注') {
          this.$set(e, 'val', this.bsqkbz)
          this.bsqkbzFlag = false
        }
      }
      if (e.field_id <= 353 && e.field_id >= 352) {
        this.$set(e, 'val', this.obj['obj' + e.field_id])
        this.obj['obj' + e.field_id + 'Flag'] = false
      }
      if (this.obj[`obj${e.approve_field_id}`] !== undefined && e.approve_field_id) {
        if (e.approve_field_id <= 353 && e.approve_field_id >= 352) {
          this.$set(e, 'val', this.obj['obj' + e.approve_field_id])
          this.obj['obj' + e.approve_field_id + 'Flag'] = false
        }
      }
      console.log(this.field_ids, this.field_vals)
    }
  }
}
</script>
